<template>
    <div class="header">
        <div class="mediaContainer">
            <div class="customeRow">
                <img src="../assets/menu.png" alt="billingham" class="menuLogo" @click="handleShowMenu()"/>
                <el-popover
                        placement="bottom"
                        title=""
                        width="200"
                        trigger="hover"
                        v-model="visible">
                    <div class="qrcodeContainer">
                        <div>扫码关注微信公众号</div>
                        <img class="qrcode" src="../assets/3030qrcode_for_gh_1fab81866f33_860.jpg" alt="billingham">
                    </div>
                    <img slot="reference" @click="visible = !visible" src="../assets/wechat.png" alt="billingham"/>
                </el-popover>
                <a target="_blank" href="https://weibo.com/6975612372/manage"><img style="margin-left: 16px;"
                                                                                   src="../assets/weibo.png"
                                                                                   alt="billingham"/></a>
            </div>
        </div>
        <div class="logo">
            <router-link to="/home"><img src="../assets/20200331104056.png" alt="billingham"/></router-link>
        </div>
        <div class="menu">
            <ul class="customeRow menuUl">
                <li @click="handleClose('product','10136')">
                    相机包
                </li>
                <li @click="handleClose('product','10140')">
                    望远镜包
                </li>
                <li @click="handleClose('product','10143')">
                    休闲包
                </li>
                <li @click="handleClose('product','10528')">
                    电脑包
                </li>
                <li @click="handleClose('product','10142')">
                    配件
                </li>
                <li @click="handleClose('/history')">
                    品牌历史
                </li>
                <li @click="handleClose('/blogs')">
                    Billingham博客
                </li>
                <li @click="handleClose('/contact-us')">
                    联系我们
                </li>
            </ul>
        </div>
        <el-drawer
                size="50%"
                custom-class="drawer"
                :visible.sync="showDrawer">
            <ul class="phoneMenu">
                <li @click="handleClose('product','10136')">
                    相机包
                </li>
                <li @click="handleClose('product','10140')">
                    望远镜包
                </li>
                <li @click="handleClose('product','10143')">
                    休闲包
                </li>
                <li @click="handleClose('product','10528')">
                    电脑包
                </li>
                <li @click="handleClose('product','10142')">
                    配件
                </li>
                <li @click="handleClose('/history')">
                    品牌历史
                </li>
                <li @click="handleClose('/blogs')">
                    Billingham博客
                </li>
                <li @click="handleClose('/contact-us')">
                    联系我们
                </li>
            </ul>
        </el-drawer>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Drawer, Popover} from 'element-ui';

    Vue.use(Drawer);
    Vue.use(Popover);
    export default {
        name: 'Header',
        inject: ['reload'],
        data: () => {
            return {
                showDrawer: false,
                visible: false
            }
        },
        props: {
            msg: String
        },
        methods: {
            handleClose(url,id=null) {
                this.showDrawer = false;
                if (id) {
                    this.handleRedirect(id);
                }else{
                    this.$router.push( url);
                }
            },
            handleShowMenu() {
                this.showDrawer = true;
            },
            /**
             * 跳转到文章详情页
             */
            handleRedirect(id){
                this.reload();
                this.$router.push({path: '/product',query:{category_id:id}});
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .mediaContainer {
        height: 44px;
        padding: 0 20px;
        background: #f4f4f4;
    }

    .mediaContainer img {
        width: 22px;
        height: 22px;
        margin-top: 11px;
    }

    .qrcodeContainer {
        text-align: center;
    }

    .qrcode {
        width: 140px;
        height: 140px;
        margin-top: 6px;
    }

    .menuLogo {
        display: none;
    }

    .logo {
        text-align: center;
    }

    .logo img {
        width: 225px;
        height: 105px;
    }

    .menu {
        background: #f4f4f4;
        height: 48px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .menuUl {
        height: 48px;
        margin: 0 auto;
        padding: 0;
        text-align: center;

    }

    .menuUl li {
        height: 48px;
        line-height: 48px;
        padding: 0 20px;
        list-style: none;
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
    }

    .menuUl li a {
        text-decoration: none;
        color: #000;
    }

    .drawer .el-drawer__header {
        margin-bottom: 0;
    }

    .phoneMenu li {
        margin-top: 20px;
        font-size: 15px;
    }

    .phoneMenu li a {
        text-decoration: none;
        color: #000;
    }

    .phoneMenu li:first-child {
        margin-top: 0;
    }

    @media screen and (max-width: 810px) {
        .menuLogo {
            display: inline-block;
            float: right;
        }

        .mediaContainer img:first-child {
            margin-right: 0;
        }

        .logo img {
            width: 205px;
            height: 100px;
        }

        .menu {
            display: none;
        }
    }


</style>
